
// 点检图片
import React, { useState } from 'react'
import { Modal } from 'antd'
import tools from 'columns/tools'
import { IsIE_nine } from 'utils/format'
import './index.less'

function Picture({ imgUrl, name }) {
  const [visible, setVisible] = useState(false)
  const seeImg = () => {
    setVisible(true)
  }
  const hideModal = () => {
    setVisible(false)
  }
  return (
    <div className='pictrue'>
        <div className='btnbox'>
          <span className='btnStyl' onClick={() => seeImg()}>查看</span>
          <span className='btnStyl' onClick={() => { IsIE_nine() === 9 ? window.open(imgUrl) : tools.downloadImg(imgUrl, name) } }>下载</span>
        </div>
        <div className='modalebox'>
        <Modal
        width='5rem'
        title="查看图片"
        visible={visible}
        onOk={hideModal}
        onCancel={hideModal}
        okText="确认"
        cancelText="取消"
        centered
        >
          <div className='imgbox' style={{ width: '100%', height: '100%'}}>
            <img src={imgUrl} style={{width: '100%', height: '4rem',}}/>
          </div>
        </Modal>
      </div>
    </div>
  )
}

export default Picture
